<!--
-流程预览
-->
<template>
  <div class="preview">
    <div class="preview-header">
      <div>
        <span>流程名称</span>
      </div>
      <div class="header-center">
        <div class="tabs-nav" :class="{ 'tabs-nav-selected': activeTab === index }" v-for="(tab, index) in tabs"
          @click="handleTabClick(index)" :key="index">
          <span>{{ tab.label }}</span>
        </div>
      </div>
    </div>
    <div class="preview-content">
      <div class="preview-content-left" v-if="!show">
        <div class="left-header">
          <span style="margin-left: 15px">缩放</span>
          <a-button @click="augment('shrink')" type="link">-</a-button>
          <span>{{ scale }}%</span>
          <a-button @click="augment('enlarge')" type="link">+</a-button>
        </div>
        <div class="left-center">
          <LeftPreview></LeftPreview>
        </div>
      </div>
      <div class="preview-content-right">
        <div class="right-header">
          <div class="right-header-left">
            <a-button @click="aaa" size="small">
              <template #icon>
                <DoubleRightOutlined v-if="show" />
                <DoubleLeftOutlined v-else />
              </template>
            </a-button>
            <span style="margin-left: 15px">现场勘察</span>
          </div>
          <div class="right-header-right">
            <a-button><template #icon>
                <SearchOutlined />
              </template>打印</a-button>
            <a-button>
              <template #icon>
                <SearchOutlined />
              </template>
              调整负责人
            </a-button>
            <a-button>
              <template #icon>
                <SearchOutlined />
              </template>
              挂起流程
            </a-button>
            <a-button>
              <template #icon>
                <SearchOutlined />
              </template>
              终止流程
            </a-button>
            <a-button>
              <template #icon>
                <SearchOutlined />
              </template>
              删除流程
            </a-button>
          </div>
        </div>
        <div class="right-center">
          <div class="right-center-top">
            <div v-if="activeTab===0">电脑端</div>
            <div v-if="activeTab===1">移动端</div>
          </div>
          <div class="right-center-bottom">
            <a-form :model="formState" name="validate_other" :formItemLayout="formItemLayout">
              <a-form-item>
                <span class="ant-form-text">审批信息</span>
              </a-form-item>
              <a-row :gutter="24">
                <a-col :span="8">
                  <a-form-item label="审批结果" :rules="[{ required: true }]">
                    <a-radio-group v-model:value="formState.rules">
                      <a-radio value="1">同意</a-radio>
                      <a-radio value="2">驳回</a-radio>
                      <a-radio value="3">终止</a-radio>
                    </a-radio-group>
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="驳回节点" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }"
                    :rules="[{ required: true }]">
                    <a-select placeholder="请选择驳回节点" @change="handleSelectChange">
                      <a-select-option value="male"> male</a-select-option>
                      <a-select-option value="female"> female</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row :gutter="24">
                <a-col :span="16">
                  <a-form-item label="审批意见" :rules="[{ required: true }]">
                    <a-textarea v-model:value="formState.introduction" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" :rules="[{ required: true }]">
                    <a-upload style="height: 45px" v-model:file-list="formState.fileList" name="avatar"
                      list-type="picture-card" class="avatar-uploader" :show-upload-list="false"
                      action="https://www.mocky.io/v2/5cc8019d300000980a055e76" :before-upload="beforeUpload"
                      @change="handleChange">
                      <img v-if="imageUrl" :src="imageUrl" alt="avatar" />
                      <div v-else>
                        <loading-outlined v-if="loading"></loading-outlined>
                        <plus-outlined v-else></plus-outlined>
                        <div class="ant-upload-text">上传签名</div>
                      </div>
                    </a-upload>
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { defineComponent, ref } from "vue";
import { DoubleRightOutlined, DoubleLeftOutlined, SearchOutlined, PlusOutlined, LoadingOutlined, AppleFilled, WindowsFilled } from "@ant-design/icons-vue";
import Panel from "@/components/flowDesign/flowNode/panel.vue";
import LeftPreview from "./leftPreview.vue";
const tabs = ref([
  {
    label: "电脑端",
    value: 0
  },
  {
    label: "移动端",
    value: 1
  }
])
const activeTab = ref(0);
const handleTabClick = (index) => {
  activeTab.value = index;
};

const show = ref(false);
const aaa = () => {
  show.value = !show.value;
};
const visible = ref(false);
const showModal = () => {
  visible.value = true;
};
const handleOk = (e) => {
  console.log(e);
  visible.value = false;
};
//  缩放
const scale = ref(100);
const augment = (val) => {
  console.log(val);
};
// 表单
const formState = ref({
  rules: "",
  introduction: undefined,
  fileList: undefined
});
const formItemLayout = {
  labelCol: {
    span: 6
  },
  wrapperCol: {
    span: 14
  }
};
const handleSelectChange = (val) => {
  console.log(val);
};
</script>
<style lang="less" scoped>
.preview {
  height: 800px;

  .preview-header {
    height: 45px;
    border-bottom: 5px solid #f5f5f5;
    display: flex;

    .header-center {
      margin: auto;
      padding: 0 15px;
      background: #994747;
      display: flex;
      padding: 10px 0 0 10px;
      background: rgba(255, 255, 255, 0.6);
      border-radius: 7px 7px 0 0;

      .tabs-nav {
        display: flex;
        justify-content: center;
        box-sizing: border-box;
        font-size: 15px;
        padding: 0 10px;
        cursor: pointer;
        border-radius: 3px 3px 0 0;
        margin: 0 10px;
        color: rgba(15, 15, 15, 0.6);
        font-weight: 700;
      }

      .tabs-nav-selected {
        color: #3078eb;
        border-bottom: 3px solid #3078eb;
      }
    }
  }

  .preview-content {
    display: flex;
    height: 780px;

    .preview-content-left {
      flex: 1;
      background-color: #f4f7fa;

      .left-header {
        border-bottom: 5px solid #f5f5f5;
        background-color: white;
        height: 45px;
        line-height: 45px;
      }

      .left-center {
        height: calc(100% - 45px);
        overflow: scroll;
      }
    }

    .preview-content-right {
      flex: 2;
      height: 780px;

      .right-header {
        border-bottom: 5px solid #f5f5f5;
        background-color: white;
        height: 45px;
        line-height: 45px;

        .right-header-left {
          float: left;
        }

        .right-header-right {
          float: right;

          .ant-btn {
            border: 1px solid #ffffff;
            border-right: 1px solid #f5f5f5;
            margin: 5px;
          }
        }
      }

      .right-center {
        display: flex;
        flex-direction: column;
        height: 740px;

        .right-center-top {
          flex: 3;
          /* 占据剩余空间 */
          border-bottom: 5px solid #f5f5f5;
        }

        .right-center-bottom {
          margin: 10px 0 0 15px;
          flex: 1;
          /* 或者具体数值，根据需要设置高度 */
        }
      }

      .ant-btn-icon-only {
        margin-left: -15px;
      }
    }
  }
}
</style>
